{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6">
        <div class="card">
            <div class="card-body">
                <h2 class="card-title text-center">注册</h2>
                <form method="post">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="email" name="email" required>
                            <div class="input-group-append">
                                <button type="button" class="btn btn-outline-primary" id="sendCode">获取验证码</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="verification_code">验证码</label>
                        <input type="text" class="form-control" id="verification_code" name="verification_code" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">注册</button>
                </form>
                <div class="text-center mt-3">
                    <p>已有账号？<a href="{{ url_for('login') }}">点击登录</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.getElementById('sendCode').addEventListener('click', function() {
    const email = document.getElementById('email').value;
    if (!email) {
        alert('请输入邮箱');
        return;
    }
    
    // 禁用按钮并开始倒计时
    const button = this;
    button.disabled = true;
    let countdown = 60;
    button.textContent = `${countdown}秒后重试`;
    
    const timer = setInterval(() => {
        countdown--;
        button.textContent = `${countdown}秒后重试`;
        if (countdown <= 0) {
            clearInterval(timer);
            button.disabled = false;
            button.textContent = '获取验证码';
        }
    }, 1000);
    
    // 发送请求获取验证码
    fetch('/get_verification_code', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `email=${encodeURIComponent(email)}`
    })
    .then(response => response.json())
    .then(data => {
        if (!data.success) {
            alert(data.message);
            clearInterval(timer);
            button.disabled = false;
            button.textContent = '获取验证码';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('发送验证码失败');
        clearInterval(timer);
        button.disabled = false;
        button.textContent = '获取验证码';
    });
});
</script>
{% endblock %} 